<template>
  <div class="pagination">
    <!-- Previous Page Button -->
    <button
        @click="previousPage"
        :disabled="currentPage <= 1"
        class="pagination-button"
    >
      上一页
    </button>

    <!-- Current Page Display -->
    <span class="page-info">
      第 {{ currentPage }} 页 / 共 {{ totalPages }} 页
    </span>

    <!-- Next Page Button -->
    <button
        @click="nextPage"
        :disabled="currentPage >= totalPages"
        class="pagination-button"
    >
      下一页
    </button>
  </div>
</template>

<script setup>
// Define props to receive current page and total pages from parent component
const props = defineProps({
  currentPage: {
    type: Number,
    required: true
  },
  totalPages: {
    type: Number,
    required: true
  }
});

// Define emit event to notify the parent component about page change
const emit = defineEmits(['page-change']);

// Method to handle previous page
const previousPage = () => {
  if (props.currentPage > 1) {
    emit('page-change', props.currentPage - 1);
  }
};

// Method to handle next page
const nextPage = () => {
  if (props.currentPage < props.totalPages) {
    emit('page-change', props.currentPage + 1);
  }
};
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination-button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.pagination-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.page-info {
  margin: 0 20px;
  font-size: 16px;
  color: #333;
}
</style>
